<template>
  <view class="page full ">
    <view class="tabs">
      <view class="nav" :class="{ active: curNav === 'review' }">
        <view class="nav-btn" data-key="review" @tap="tabChangeAction('review')"
          >审核中</view
        >
      </view>
      <view class="nav" :class="{ active: curNav === 'reviewed' }">
        <view
          class="nav-btn"
          data-key="reviewed"
          @tap="tabChangeAction('reviewed')"
          >审核通过</view
        >
      </view>
      <view class="nav" :class="{ active: curNav === 'fail' }">
        <view class="nav-btn" data-key="fail" @tap="tabChangeAction('fail')"
          >未通过</view
        >
      </view>
    </view>
    <div class="tabs-content">
      <ReviewList v-if="curNav === 'review'" />
      <ReviewedList v-if="curNav === 'reviewed'" />
      <FailList v-if="curNav === 'fail'" />
    </div>

    <!--  <u-tabs
      :list="tabMenus"
      :current="currentTab"
      lineWidth="20"
      :scrollable="false"
      @change="tabChangeAction"
    >
    </u-tabs> -->
    <!-- 		 <ReviewList v-if="currentTab === 0" /> -->
    <!--     -->
  </view>
</template>

<script>
import ReviewList from './reviewList.vue';
import ReviewedList from './reviewedList.vue';
import FailList from './failList.vue';

export default {
  components: {
    ReviewList,
    ReviewedList,
    FailList,
  },
  data() {
    return {
      curNav: 'review',
    };
  },

  mounted() {},
  methods: {
    tabChangeAction(key) {
      this.curNav = key;
    },
  },
};
</script>
<style>
page {
  width: 100%;
  height: 100%;

}
</style>
<style lang="scss" scoped>
.tabs {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-flow: row wrap;
}

.tabs .nav {
  text-align: center;
  flex: 1;
  border: 1px solid rgba(40, 44, 42, 0.1);
}

.tabs .nav:not(:last-child) {
  border-right: none;
}

.tabs .nav.active {
  border-top-color: #2cc185;
  border-bottom: none;
}

.tabs .nav-btn {
  padding: 12px 0;
  background: rgba(40, 44, 42, 0.05);
  color: #74777b;
  transition: color 0.2s;
}

.tabs .nav.active .nav-btn {
  background: none;
  box-shadow: inset 0 3px 0 #2cc185;
  color: #2cc185;
}
</style>
